<template>
    <div ref="diskStautsRef" style="padding: 10px;position: relative;">
      <div class="headerBoxList">
        <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M41 4H7C5.34315 4 4 5.34315 4 7V41C4 42.6569 5.34315 44 7 44H41C42.6569 44 44 42.6569 44 41V7C44 5.34315 42.6569 4 41 4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M34 4V22H15V4H34Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M29 11V15" stroke="#333" stroke-width="4" stroke-linecap="round"/><path d="M11.9968 4H36.9984" stroke="#333" stroke-width="4" stroke-linecap="round"/></svg>
        <span style="margin-left: 10px">磁盘状态</span>
      </div>
      <div class="contentBoxYY" style="">
        <el-table
          :data="list"
          stripe
          style="width: 100%">
          <el-table-column
            prop="date"
            label="磁盘信息"
            >
            <template slot-scope="space">
              <div>缓存大小：{{ change(space.row.AppCacheSize) }}</div>
              <div>数据大小：{{ change(space.row.AppDataSize) }}</div>
              <div>App大小：{{ change(space.row.AppSize) }}</div>
              <div>音频大小：{{ change(space.row.AudioSize) }}</div>
              <div>可用缓存：{{ space.row.CacheFree }}</div>
              <div>空闲占比：{{ space.row.DataFree }}</div>
              <div>下载大小：{{ change(space.row.DownloadsSize) }}</div>
              <div>基于文件：{{ space.row.FileBased }}</div>
              <div>延迟：{{ space.row.Latency }}</div>
              <div>其它大小：{{ change(space.row.OtherSize) }}</div>
              <div>照片大小：{{ change(space.row.PhotosSize) }}</div>
              <div>读写速度：{{ space.row.Speed }}</div>
              <div>系统可用空间：{{ space.row.SystemFree }}</div>
              <div>系统大小：{{ change(space.row.SystemSize) }}</div>
              <div>视频大小：{{ change(space.row.VideosSize) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="50"
            >
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="offset"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
      <a-modal width="95%" v-model="dialogFormVisible" :getContainer="getRefsAff">
        <el-table :data="modelData">
          <el-table-column property="AppDataSizes" label="详情">
            <template slot-scope="scope">
              <div style="display: flex;align-items: center;">
                <img width="60" height="60" src="../../../../assets/diskStauts.png" alt="">
                <div style="margin-left: 20px;">
                  <div>包名：{{ scope.row.PackageNames }}</div>
                  <div>数据大小：{{ change(scope.row.AppDataSizes) }}</div>
                  <div>App大小：{{ change(scope.row.AppSizes) }}</div>
                  <div>缓存大小：{{ change(scope.row.CacheSizes) }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </a-modal>

    </div>
  </template>
  
  <script>
  import { getPhoneInFoApi } from '@/api/phoneInfo/index'
  export default {
    name: "diskStatus",
    props:['sendData'],
    data() {
      return {
        dialogFormVisible:false,
        activeName: 0,
        list:[],
        offset:1,
        limit:10,
        modelData:[]
      };
    },
    mounted(){
      this.initFunction();
    },
    watch:{
    '$store.state.account.basePhone':function(){
      this.initFunction();
    }
  },
    created() {
      
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.offset = val;
        this.initFunction();
      },
      change(limit){
        if(limit == 0)return limit;
    var size = "";
    if(limit < 0.1 * 1024){                            //小于0.1KB，则转化成B
        size = limit.toFixed(2) + "B"
    }else if(limit < 0.1 * 1024 * 1024){            //小于0.1MB，则转化成KB
        size = (limit/1024).toFixed(2) + "KB"
    }else if(limit < 0.1 * 1024 * 1024 * 1024){        //小于0.1GB，则转化成MB
        size = (limit/(1024 * 1024)).toFixed(2) + "MB"
    }else{                                            //其他转化成GB
        size = (limit/(1024 * 1024 * 1024)).toFixed(2) + "GB"
    }    
 
    var sizeStr = size + "";                        //转成字符串
    var index = sizeStr.indexOf(".");                    //获取小数点处的索引
    var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
    if(dou == "00"){                                //判断后两位是否为00，如果是则删除00               
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
    }
    return size;
},
      getRefsAff(){
      return  this.$refs.diskStautsRef;
    },
      handleClick(row){
        this.modelData = '';
        this.modelData = row.children;
        this.dialogFormVisible = true;
      },
      initFunction() {
        let api = '/'+this.sendData.href;
        let data = {
                proof_num:this.sendData.proof_num,
                offset:this.offset,
                limit:this.limit
            }
        getPhoneInFoApi(data,api).then(res=>{
          this.list = res.data;
          this.total = res.data[0].cnt;
        }).catch(error=>{

        })
        return;

        let node = this.sendData;
      let dataJson = {
        "proof_num":node.proof_num,
        "rxTmpPath":'/'+node.subtype
      }
      getRxTmpPathApi(dataJson).then(res=>{
        if(!res.data)return
        const stringData = res.data;

        const delimiters = [
          "Latency:",
          "Package Names:",
          "App",
          "App",
          "Cache:",
        ];
  
        const dataArray = [];
        let currentData = "";
  
        for (let i = 0; i < delimiters.length; i++) {
          const delimiter = delimiters[i];
          const startIndex = stringData.indexOf(delimiter);
          const endIndex =i < delimiters.length - 1? stringData.indexOf(delimiters[i + 1]): stringData.length;
  
          if (startIndex !== -1 && endIndex !== -1) {
            const data = stringData.slice(startIndex, endIndex).trim();
            dataArray.push(data);
          }
        }
        let arr = [];
        // 格式化字符串数组为json数据
        for (let index = 0; index < dataArray.length; index++) {
          const element = dataArray[index];
          const originalString = element;
          const delimiter = "\n";
  
          const delimiterIndex = originalString.indexOf(delimiter);
  
          if (delimiterIndex !== -1) {
            const firstPart = originalString.substring(0, delimiterIndex).trim();
            const secondPart = originalString
              .substring(delimiterIndex + 1)
              .trim();
            let item = {
              titleKey: firstPart,
              content: secondPart.split("\n"),
            };
            arr.push(item);
          } else {
            console.log("Delimiter not found in the string.");
          }
  
          // arr.push(item)
        }
        this.list = arr;s
      }).catch(error=>{
        
      })

      },
    },
  };
  </script>
  
  <style scoped>
  .headerBoxList {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
  }
  .contentBoxYY{
      width: 95%; 
      margin: 0 auto;
      overflow: hidden;
      height:83vh;
      overflow-y: auto;
      overflow-x: hidden;
  }
  @media screen and (min-width: 2360px) {
      .contentBoxYY{
          width: 95%; 
          margin: 0 auto;
          overflow: hidden;
          height:79vh;
          overflow-y: auto;
          overflow-x: hidden;
      }
  }
  @media screen and (min-width: 2561px) {
      .contentBoxYY{
          width: 95%; 
          margin: 0 auto;
          overflow: hidden;
          height:64vh;
          overflow-y: auto;
          overflow-x: hidden;
      }
  }
  
  </style>